<template>
  <div ref="pageComBox" class="app-container page_wrapper">
    <div ref="otherBox">
      <Params ref="params" @search="customerAllContract" />
    </div>
    <el-table
      ref="multipleTable"
      :data="dataList"
      style="width: 100%"
      :max-height="tableHeight"
      :key="tableHeight"
      v-tabscroll="$getTableHeight"
    >
      <el-table-column prop="createDate" label="签约日期" />
      <el-table-column prop="customerName" label="客户姓名">
        <template slot-scope="{ row }">
          <el-link type="primary" class="el_link" @click="openFollow(row)">{{
            row.customerName
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="customerMobile" label="客户电话">
      </el-table-column>
      <el-table-column label="合同编号">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <div
              class="contractImg"
              v-for="(item, index) in scope.row.images"
              :key="index"
            >
              <img :src="item" alt="" />
            </div>
            <div class="contractCode" slot="reference">
              {{ scope.row.contractCode }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="deposit" label="签约额度" />
      <el-table-column prop="state" label="状态">
        <template slot-scope="{ row }">{{
          SIGNSTATUSLIST[row.state]
        }}</template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" :width="240" />
      <el-table-column label="未跟进时间" :width="100">
        <template slot-scope="scope">
          <div class="red">{{ scope.row.days }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" :width="80">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="invalidHandle(scope.row)"
            >作废</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <BasePagination v-model="page" :total="totalCount" @change="pageOnChange" />
  </div>
</template>

<script>
import { customerAllContract, abolishCustomerContract } from "@/api/customer";
import Params from "./Params.vue";
import { SIGNSTATUSLIST } from "@/common/constants";
import { broadcast, deepClone } from "@/utils/util";
export default {
  components: { Params },
  data() {
    return {
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      SIGNSTATUSLIST,
      tableHeight: 0,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    // 计算表格的高度
    let _this = this;
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    async customerAllContract(form) {
      this.showAppLoading();
      try {
        await customerAllContract({
          page: this.page,
          size: this.pageSize,
          paramObject: { ...form },
        }).then((res) => {
          const { data } = res;
          if (data.dataList) {
            data.dataList.forEach((element) => {
              if (element.images) {
                element.images = element.images.split(",");
              }
            });
          }
          this.dataList = data.dataList || [];
          this.totalCount = data.totalCount;
        });
        this.hideAppLoading();
      } catch (error) {
        console.log(error);
        this.hideAppLoading();
      }
    },
    pageOnChange(row) {
      this.page = row.page;
      if (row.pageSize) {
        this.pageSize = row.pageSize;
      }
      this.$refs.params.search();
    },
    followUpHandle() {},
    invalidHandle(item) {
      this.$confirm(`确认作废${item.customerName}合同?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "删除中...";
            try {
              await abolishCustomerContract({ id: item.id }).then((res) => {
                this.$message({
                  message: res.message,
                  type: "success",
                });
              });
              done();
              instance.confirmButtonLoading = false;
              instance.confirmButtonText = "确定";
            } catch (error) {
              done();
              instance.confirmButtonLoading = false;
              instance.confirmButtonText = "确定";
            }
          } else {
            done();
          }
        },
      });
    },

    // 打开客户跟进页面
    openFollow(row) {
      let options = deepClone(row);
      let list = this.dataList;
      options.id = options.customerId;
      broadcast("look.user.follow", { data: options, list: list });
    },
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.el_link {
  text-decoration: underline;
}
</style>
